<template>
  <div class="card">
    <div class="main">
      <p class="name-mobile"><span class="name">{{data.receiver_name}}</span><span class="mobile">{{data.receiver_mobile}}</span></p>
      <p class="region-address"><i class="address-icon"></i>{{data.receiver_region + ' ' + data.receiver_address}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {}
  }
}
</script>

<style scoped lang="scss">
  @import "../../../assets/css/pub";

  .card {
    padding: .25rem;
    background-color: #fff;
    .main {
      .name-mobile {
        height: .55rem;
        line-height: .55rem;
        font-size: $default_font_size;
        color: $default_title_color;
        @include textHideByLine(1);
        font-weight: bold;
        .name {
          width: 2.5rem;
        }
        .mobile {
          margin-left: .5rem;
        }
        .tag {
          margin-left: .25rem;
          padding: 0 .25rem;
          color: $default_blue_color;
          border: .0125rem solid $default_blue_color;
          font-size: $default_smallfont_size;
          font-weight: normal;
        }
      }
      .region-address {
        line-height: .55rem;
        margin-top: .125rem;
        font-size: $default_middlefont_size;
        color: $default_subtitle_color;
        @include textHideByLine(2);
        .address-icon {
          margin-right: .25rem;
          vertical-align: sub;
        }
      }
    }
  }
</style>
